<template>
  <div class="themes-select-component">
    <div class="main-box">
      <div class="name">面授主题</div>
      <img
        class="arrow-img"
        src="https://image.xuexiwangzhe.com/FnR5O-iWZ13pHT-T-Y_bs5CeUknS"
      />
      <div class="select-menu" v-if="selectMenuShow">
        <div class="select-menu-item" @click="changeTypeModal = true">
          <div class="item-title">
            <img
              src="https://image.xuexiwangzhe.com/FlX1K6oDxnc5J5MSgt1-OGQZNRJP"
              class="item-title-img"
            />
            <div>面授</div>
          </div>
          <div class="item-content">
            自由设置主题，灵活安排课程
          </div>
        </div>
        <div class="select-menu-item">
          <div class="item-title">
            <img
              src="https://image.xuexiwangzhe.com/Fk9d0UZp_xMW-gbQwhTrLgrD1Lb0"
              class="item-title-img"
            />
            <div>打卡</div>
          </div>
          <div class="item-content">
            每天只能设置1个主题
          </div>
        </div>
        <div class="select-menu-item">
          <div class="item-title">
            <img
              src="https://image.xuexiwangzhe.com/FoYHH65f30umpuUwCHo_Yr3dPaEm"
              class="item-title-img"
            />
            <div>通关</div>
          </div>
          <div class="item-content">
            完成上个主题，才能解锁当前主题
          </div>
        </div>
      </div>
    </div>
    <mu-dialog
      width="492"
      :esc-press-close="false"
      :overlay-close="false"
      :open.sync="changeTypeModal"
      dialog-class="custom-modal"
    >
      <div class="custom-modal-top">
        <div class="custom-modal-title">确认修改课程类型</div>
        <img
          class="custom-modal-close-img"
          src="https://image.xuexiwangzhe.com/Fnbsz2MJvhTRZ29k39oGf9_4Ao6c"
          @click="changeTypeModal = false"
        />
      </div>
      <div class="ct-modal-content">
        修改后，您需要重新设置主题的「时间」信息，是否确认修改？
      </div>
      <div class="custom-modal-btn-box">
        <mu-button
          class="custom-modal-btn-cancel"
          @click="changeTypeModal = false"
          >取消</mu-button
        >
        <mu-button
          class="custom-modal-btn-confirm custom-modal-btn-confirm-edit"
          >确认修改</mu-button
        >
      </div>
    </mu-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeTypeModal: false,
      selectMenuShow: false,
    };
  },
};
</script>

<style lang="less">
.ct-modal-content {
  color: #333333;
  font-size: 15px;
  margin-bottom: 50px;
}

.themes-select-component {
  .main-box {
    display: flex;
    align-items: center;
    position: relative;
  }

  .name {
    color: #333;
    font-weight: bold;
    margin-right: 6px;
  }

  .arrow-img {
    width: 12px;
  }

  .select-menu {
    position: absolute;
    top: 31px;
    left: 0;
    z-index: 10;
    width: 210px;
    background-color: #fff;
    box-shadow: 0px 2px 3px 0px rgba(102, 102, 102, 0.2);
    border-radius: 9px;
  }

  .select-menu-item {
    padding: 8px 15px 9px 15px;
    cursor: pointer;

    &:hover {
      background-color: #f0f0f0;
    }

    .item-title {
      display: flex;
      font-size: 12px;
      color: #333;
      align-items: center;
      margin-bottom: 3px;
    }

    .item-title-img {
      width: 15px;
      margin-right: 6px;
    }

    .item-content {
      font-size: 11px;
      color: #999;
    }
  }
}
</style>
